<template>
   <div class="view-container">
      <!--面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>上传生成代码</el-breadcrumb-item>
      </el-breadcrumb>
      <!--搜索项 -->
      <div class="Where">
         <el-col :span="6">
            <el-form-item label="生成代码名字">
               <el-input v-model="uploadmakecode_name" placeholder="请输入生成代码名字" @input="Search()" />
            </el-form-item>
         </el-col>

      </div>

      <!--选择项 -->
      <div class="Select">
         <el-button type="success" @click="AddUploadmakecodeView = true">添加</el-button>

         <!-- 批量操作 -->
         <el-dropdown class="DropDown">
            <el-button type="primary">
               更多操作
               <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
               <el-dropdown-menu>
                  <el-dropdown-item @click="Batch_Delete()">批量删除</el-dropdown-item>
                  <el-dropdown-item @click="HistoryUploadmakecodeView = true">历史记录</el-dropdown-item>

               </el-dropdown-menu>
            </template>
         </el-dropdown>

      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%" empty-text="没有数据!" #default="scope"
         @select-all="handleSelectionChange" @select="handleSelection">
         <el-table-column type="selection" width="55" />
         <el-table-column v-for="item, index in column" v-model="column" :prop="item.prop" :label="item.label"
            :width="item.width">
         </el-table-column>
         <el-table-column label="操作" show-overflow-tooltip #default="scope">
            <main>
               <el-button type='success' @click='handleUpdate(scope.row); EditUploadmakecodeView = true'>编辑</el-button>
               <el-button type='success' @click='handleUpdate(scope.row); DeleteUploadmakecodeView = true'>删除</el-button>
            </main>
         </el-table-column>
      </el-table>

   </div>
   <AddUploadmakecode v-model='AddUploadmakecodeView' />
   <EditUploadmakecode v-model='EditUploadmakecodeView' :data='Row' />
   <DeleteUploadmakecode v-model='DeleteUploadmakecodeView' :data='Row' />

   <HistoryUploadmakecode v-model="HistoryUploadmakecodeView" />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getUploadmakecodeList, SearchUploadmakecode, BatchDeleteUploadmakecode } from '../../../service/Uploadmakecode'
import { ElTable } from 'element-plus'
import { ElMessage } from 'element-plus'
import {ReadImageSrc} from '/src/config.js'



import HistoryUploadmakecode from './component/HistoryUploadmakecode.vue'
import AddUploadmakecode from './component/AddUploadmakecode.vue'
import EditUploadmakecode from './component/EditUploadmakecode.vue'
import DeleteUploadmakecode from './component/DeleteUploadmakecode.vue'




const AddUploadmakecodeView = ref(false)
const EditUploadmakecodeView = ref(false)
const DeleteUploadmakecodeView = ref(false)

const HistoryUploadmakecodeView = ref(false)

const multipleSelection = ref<User[]>([])
const UploadName = ref('')


const uploadmakecode_name = ref("")
const uploadmakecode_img = ref("")
const uploadmakecode_type = ref("")





// 列表内容
const tableData = ref()
// 获取当行数据
const Row_List = ref()
const Row = reactive(Row_List)
// 列表List渲染
const column = reactive([

   {
      label: '生成代码名字',
      prop: 'uploadmakecode_name',
      width: 200,
   }, {
      label: '生成代码预览图片',
      prop: 'uploadmakecode_img',
      width: 200,
   }, {
      label: '生成代码类型',
      prop: 'makecodetype_name',
      width: 200,
   },

   {
      label: '创建时间',
      prop: 'uploadmakecode_create_time',
      width: 200,
   },
])

onMounted(() => {
   getUploadmakecodeList().then((res) => {
      tableData.value = res.data
   })
})


/**
 * 搜索功能
 * @author L
 */
//*搜索
const Search = () => {
   const data = {
      uploadmakecode_name: uploadmakecode_name.value,
      uploadmakecode_img: UploadName.value || index,
      uploadmakecode_type: uploadmakecode_type.value,
   }
   SearchUploadmakecode(data).then((res) => {
      tableData.value = res.data
   })
}
/**
 * 获取当前行数据
 * @author L
 */
function handleUpdate(index) {
   if(index.uploadmakecode_type == "HTML")
   {
      index.uploadmakecode_type = 1
   }else if(index.uploadmakecode_type == "Vue")
   {
      index.uploadmakecode_type= 2
   }
   Row_List.value = index
}


/**
 * 批量操作
 * @author L
 */
//*全选获取内容
const handleSelectionChange = (val: User[]) => {
   multipleSelection.value = val
}
//*选取一条或多条行数内容
const handleSelection = (select) => {
   multipleSelection.value = select
}
//*批量删除
const Batch_Delete = () => {
   //*没有对象则扔出异常
   if (multipleSelection.value.length == 0) {
      ElMessage.error('请选择对象!')
      console.error("没有选择需求对象!");
   } else {
      const data = { select_Uploadmakecode: multipleSelection.value };
      BatchDeleteUploadmakecode(data).then((res) => {
         console.log(res);
      })

   }
}








</script>
<style>
.DropDown {
   position: relative;
   top: -20px;
   left: 50px;
}
</style>